<script lang="ts" setup>
	import { MessageOutlined, HeartOutlined, EyeOutlined, ShareAltOutlined, UserOutlined, HeartFilled, ArrowUpOutlined } from "@ant-design/icons-vue"
	import { ref, watch } from "vue"
	import { message } from 'ant-design-vue';
	import CommentInput from '@/views/community/CommentInput.vue';
	import CommentList from '@/views/community/CommentList.vue';
	import Reply from '@/views/community/Reply.vue';
	import { useRoute, useRouter } from 'vue-router'
	import { ArticleApi } from '@/api/article'
	import { CommentApi } from '@/api/comment'
	import { useUserStore } from '@/stores/user';
	import { config } from "@/config/axios/config"
	import utils from '@/utils'

	const router = useRouter()
	const userStore = useUserStore()
	const route = useRoute()
	let id = route.query.id
	if (route.query.commentId) {
		CommentApi.getCommentById({
			id: route.query.commentId,
		}).then((res : any) => {
			if (res.code == 1) {
				doReply({
					commentId: res.data.id,
					nickname: res.data.nickname,
					userId: res.data.userId,
				})
			}
		})
	}

	let detail = ref<any>()
	let showReply = ref(false)
	let replyData = ref()
	const getDetail = () => {
		ArticleApi.getDetail({
			id: id
		}).then((res : any) => {
			if (res.code == 1) {
				detail.value = res.data
				//兼容上线之前添加的富文本图片
				// detail.value.content = detail.value.content.replaceAll("http://127.0.0.1:8080",config.baseUrl)

				detail.value.imgList = detail.value.img ? detail.value.img.split(",") : []
				detail.value.labelList = detail.value.label ? detail.value.label.split(",") : []
				let loveUserList = detail.value.loveUser ? detail.value.loveUser.split(",") : []
				if (userStore.userInfo == "" || loveUserList.indexOf(userStore.userInfo.id + "") == -1) {
					detail.value.isLove = false
				} else {
					detail.value.isLove = true
				}
			}
		})
	}
	getDetail()
	const love = () => {
		ArticleApi.love({
			id: id
		}).then((res : any) => {
			if (res.code == 1) {
				detail.value.love = res.data.love
				let loveUserList = res.data.loveUser.split(",")
				if (userStore.userInfo == "" || loveUserList.indexOf(userStore.userInfo.id + "") == -1) {
					detail.value.isLove = false
				} else {
					detail.value.isLove = true
				}
			}
		})
	}
	const toDetail = (id : number) => {
		router.push({ name: 'communityDetail', query: { id: id } })
	}
	watch(route, (to, from) => {
		if (to.path === from.path) {
			router.go(0)
		}
	});
	let Refchild = ref<any>(null)
	const submitComment = (e : any) => {
		CommentApi.addComment({
			...e,
			pid: 0,
			articleId: id,
		}).then((res : any) => {
			if (res.code == 1) {
				if (Refchild.value) {
					Refchild.value.reset()
				}
				message.success(res.message);
			} else if (res.code == 0) {
				message.error(res.message);
			}
		})
	}
	const copyUrl = () => {
		var textArea = document.createElement("textarea");
		textArea.value = window.location.href;
		document.body.appendChild(textArea);
		textArea.select();
		document.execCommand("copy");
		document.body.removeChild(textArea);
		message.success('链接已复制');

	}
	const doReply = (e : any) => {
		document.body.style.overflow = "hidden"
		showReply.value = true
		replyData.value = e
		replyData.value.articleId = id
	}
	const exitReply = () => {
		document.body.style.overflow = "inherit"
		showReply.value = false
		replyData.value = {}
	}
	const updateLove = (e : any) => {
		Refchild.value.setLove(e)
	}
	const toTop = () => {
		window.scrollTo({
			top: 0,
			left: 0,
			behavior: 'smooth'
		});
	}
	const centerElement = (id : string) => {
		var element = document.getElementById(id);
		var bounding = element?.getBoundingClientRect();
		if (bounding) {
			var offset = bounding.top - window.innerHeight / 2 + bounding.height / 2;
			window.scrollBy({
				top: offset,
				behavior: "smooth"
			});
		}
	}
	let postList = ref<any>([])
	const getPostList = () => {
		ArticleApi.getArticle({
			page: 1,
			size: 3,
			type: 1
		}).then((res : any) => {
			if (res.code == 1) {
				postList.value = [...res.data]
			}
		})
	}
	getPostList()
</script>

<template>
	<div class="content" v-if="detail">
		<div class="content-left">
			<div class="header">
				<div class="title">{{detail.title}}</div>
				<div class="header-bottom">
					<div class="time">
						发布于 {{utils.getFullTime(detail.createTime)}}
					</div>
					<div class="like-box">
						<div class="icon-box">
							<heart-outlined class="icon" /> {{detail.love}}
						</div>
						<div class="icon-box">
							<message-outlined class="icon" />{{detail.remark}}
						</div>
						<div class="icon-box">
							<eye-outlined class="icon" />{{detail.read}}
						</div>
					</div>
				</div>
			</div>
			<div class="article">
				<div v-html="detail.content"></div>
			</div>
			<div class="btn-box">
				<a-button type="primary" class="btn" @click="love">
					<heart-filled class="icon active" v-if="detail.isLove" />
					<heart-outlined class="icon" v-else />
					<span>{{detail.love}}</span> 赞
				</a-button>
				<a-button type="primary" class="btn" @click="copyUrl">
					<share-alt-outlined class="icon" /><span>分享</span>
				</a-button>
			</div>
			<div class="comment-box" id="input">
				<CommentInput @change="submitComment" placeholder="发表评论..." type="comment" />
			</div>
			<div class="comment-list">
				<CommentList @reply="doReply" :articleId="id" ref="Refchild" />
			</div>
		</div>
		<div class="content-middle">
			<div class="fun-box">
				<div class="icon-box" @click="love">
					<heart-filled class="icon active" v-if="detail.isLove" />
					<heart-outlined class="icon" v-else />
				</div>
				<div class="icon-box" @click="centerElement('input')">
					<message-outlined class="icon" />
				</div>
				<div class="icon-box" @click="copyUrl">
					<share-alt-outlined class="icon" />
				</div>
				<div class="icon-box" @click="toTop">
					<ArrowUpOutlined class="icon" />
				</div>
			</div>
		</div>
		<div class="content-right">
			<div class="top">
				<div class="header">
					<a-avatar :size="72" :src="detail.avatar">
						<template #icon>
							<UserOutlined />
						</template>
					</a-avatar>
				</div>
				<div class="name">
					{{detail.nickname}}
				</div>
				<div class="signature">
					{{detail.signature}}
				</div>
				<!-- <div class="sum-box">
					<div class="sum">
						<div class="value">2.5k</div>
						<div class="key">被关注</div>
					</div>
					<div class="sum">
						<div class="value">53</div>
						<div class="key">已关注</div>
					</div>
				</div>
				<div class="btn-box">
					<a-button type="primary" class="attention">
						关注
					</a-button>
					<a-button type="default" class="message">
						私信
					</a-button>
				</div> -->
			</div>
			<div class="title">
				最新活动...
			</div>
			<div class="course" v-for="(item,index) in postList" @click="toDetail(item.id)">
				<img :src="item.img" />
				<div class="text-box">
					<div class="course-title">
						{{item.title}}
					</div>
					<div class="footer">
						<div class="footer-left">
							<div class="avatar">
								<a-avatar :size="32" :src="item.avatar">
									<template #icon>
										<UserOutlined />
									</template>
								</a-avatar>
							</div>
							<div class="name">{{item.nickname}}</div>
						</div>
						<div class="footer-right">
							<div class="icon-box">
								<heart-outlined class="icon" />{{item.love}}
							</div>
							<div class="icon-box">
								<message-outlined class="icon" />{{item.remark}}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<Reply :replyData="replyData" @exitReply="exitReply" v-if="showReply" @updateLove="updateLove" />
</template>

<style lang="scss" scoped>
	.content {
		width: 1280px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		.content-left {
			width: 800px;
			padding: 0 47px 100px 0;

			.header {
				padding-top: 170px;

				.title {
					font-size: 24px;
					line-height: 120%;
					margin-bottom: 18px;
				}

				.header-bottom {
					.time {
						color: #999999;
					}

					.like-box {
						margin-left: auto;
						display: flex;
						align-items: center;
						color: #999999;
						width: 200px;
						justify-content: space-between;
						font-size: 16px;

						.icon-box {
							display: flex;
							align-items: end;

							.icon {
								margin-right: 4px;
								font-size: 20px;
							}
						}
					}
				}
			}

			.article {
				margin-top: 65px;
			}

			.btn-box {
				margin-top: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-bottom: 96px;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 180px;
					height: 48px;
					font-size: 16px;
					color: #fff;
					border: none;
					background-color: #1677ff;
					margin: 0 12px;
					cursor: pointer;
					border-radius: 0px;
				}

				.icon {
					font-size: 24px;
					margin-right: 8px;
				}


				.active {}

				span {
					margin-right: 4px;
				}
			}
		}

		.content-middle {
			width: 1px;
			background-color: #e0e0e0;

			.fun-box {
				position: sticky;
				top: 350px;
				height: 400px;

				.icon-box {
					transform: translateX(-50%);
					display: flex;
					flex-flow: row nowrap;
					align-items: center;
					justify-content: center;
					width: 48px;
					height: 48px;
					border: 1px solid #e0e0e0;
					border-radius: 100%;
					margin-bottom: 24px;
					cursor: pointer;
					font-size: 20px;
					background-color: #fff;

					.icon {}

					.active {
						color: red;
					}
				}

				.icon-box:hover {
					background-color: #eeeeee;
				}
			}
		}

		.content-right {
			width: 386px;
			padding: 0 0 100px 48px;

			.top {
				width: 264px;

				.header {
					padding-top: 170px;
				}

				.name {
					display: flex;
					align-items: center;
					margin-top: 16px;
					font-size: 24px;
				}

				.signature {
					margin-top: 16px;
					font-size: 16px;
					line-height: 24px;
				}

				.sum-box {
					display: flex;
					align-items: center;
					margin-top: 24px;

					.sum {
						margin-right: 48px;
						cursor: pointer;

						.value {}

						.key {
							margin-top: 4px;
						}
					}

				}

			}

			.btn-box {
				margin-top: 43px;
				display: flex;
				flex-direction: column;

				.attention {
					width: 180px;
					height: 38px;
					border-radius: 2px;
				}

				.message {
					width: 180px;
					height: 38px;
					border-radius: 2px;
					margin-top: 16px;
					background-color: #f0f0f0;
				}

				.message:hover {
					border-color: #d9d9d9;
					color: rgba(0, 0, 0, 0.88);
				}
			}

			.title {
				font-size: 24px;
				margin: 96px 0 24px;
			}



			.course {
				cursor: pointer;
				background-color: #fff;
				border: 1px solid #0000001f;
				border-radius: 0 0 16px 16px;
				margin: 0 24px 24px 0;

				img {
					width: 100%;
					height: 216px;
				}

				.text-box {
					padding: 16px;

					.course-title {
						font-size: 18px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						line-height: 25px;
						height: 50px;
					}

					.footer {
						padding-top: 16px;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.footer-left {
							display: flex;
							align-items: center;

							.avatar {}

							.name {
								margin-left: 8px;
								font-size: 16px;
							}
						}

						.footer-right {
							display: flex;
							align-items: center;

							.icon-box {
								color: #00000099;
								margin-left: 12px;
								display: flex;
								align-items: center;

								.icon {
									font-size: 18px;
									margin-right: 4px;
								}
							}
						}
					}
				}
			}
		}
	}
</style>